<template>
  <el-dialog title="切换身份" v-model="model" width="800px">
    <JmashTable
      class="table-top"
      ref="multipleTableRef"
      row-key="userId"
      :list-loading="listLoading"
      :data="tableData"
      :table-label="tableLabel"
      :isSelection="false"
    >
      <template #mobilePhone="scope">
        {{
          scope.data.row.showEncrypt ? scope.data.row.mobilePhone : scope.data.row.mobilePhoneIns
        }}
        <span v-if="scope.data.row.mobilePhoneIns" class="distance-left">
          <svg-icon
            v-show="!scope.data.row.showEncrypt"
            icon-class="close-eye"
            @click="encryptEvent(scope.data.row)"
          />
          <svg-icon
            v-show="scope.data.row.showEncrypt"
            icon-class="eye-open"
            @click="encryptEvent(scope.data.row)"
          />
        </span>
      </template>
      <template #email="scope">
        {{ scope.data.row.showEncrypt ? scope.data.row.email : scope.data.row.emailIns }}
      </template>
      <template #status="scope">
        {{ scope.data.row.userId.replace(/-/g, "") === userInfo.primaryUserId ? "原身份" : "" }}
        {{ scope.data.row.userId == userInfo.userId ? "当前身份" : "" }}
      </template>
      <template #operation="scope">
        <span
          v-if="scope.data.row.userId !== userInfo.userId"
          class="el-button-color"
          @click="handleChangeUser(scope.data.row)"
        >
          &nbsp;切换
        </span>
      </template>
    </JmashTable>
  </el-dialog>
</template>

<script setup lang="ts">
import type { TableColumn } from "@/types/index";
import { useUserStore } from "@/stores/modules/user";
import { allowRunAsUser, runAsUser } from "@/api/auth/index";
const listLoading = ref(false);
const tableData = ref([]);
const userInfo = useUserStore().user;

const model = defineModel<boolean>();

const tableLabel: TableColumn[] = reactive([
  {
    label: "login.username",
    prop: "loginName",
    width: "100",
    sortable: true,
    isColumn: true
  },
  {
    label: "sysUser.nickname",
    prop: "nickName",
    minWidth: "100",
    isColumn: true
  },
  {
    label: "sysUser.phoneNumber",
    prop: "mobilePhone",
    slotName: "mobilePhone",
    columnType: "slot",
    width: "140",
    isColumn: true,
    sortable: true
  },
  {
    label: "sysUser.email",
    prop: "email",
    width: "180",
    slotName: "email",
    columnType: "slot",
    isColumn: true,
    sortable: true
  },
  {
    label: "common.status",
    width: "100",
    slotName: "status",
    columnType: "slot",
    isColumn: true
  },
  {
    label: "common.operate",
    width: "80",
    slotName: "operation",
    columnType: "slot",
    fixed: "right",
    isColumn: true
  }
]);

listLoading.value = true;

// 隐藏/显示
function encryptEvent(row: any) {
  row.showEncrypt = !row.showEncrypt;
}

allowRunAsUser().then(({ data }) => {
  listLoading.value = false;
  tableData.value = data.results;
});

function handleChangeUser(row: any) {
  ElMessageBox.confirm("确定切换用户身份吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    console.log(useUserStore());
    runAsUser(row.userId).then(async (response) => {
      if (response.status === 200) {
        useUserStore().user.roleCodes = [];
        useUserStore().user.permCodes = [];
        model.value = false;
        location.reload();
        ElMessage({
          message: "切换成功",
          type: "success"
        });
      }
    });
  });
}
</script>
